『30 Days of Streamlit』を3日でやってみた #3 (Day21〜Day30) #30DaysOfStreamlit
2024.04.30"『30 Days of Streamlit』を3日でやってみた"シリーズ第3弾、21日目から30日目の実践内容です。
第1弾(01日目〜10日目)の内容はこちら：
第2弾(11日目〜20日目)の内容はこちら：
目次
- 実践記録(Day21〜Day30)
- Day 21： st.progressの実装
- Day 22： st.formの実装
- Day 23： st.experimental_get_query_paramsの実装
- Day 24： st.cacheの実装
- Day 25： st.session_stateの実装
- Day 26： Bored API アプリを構築してAPIを使用
- Day 27： Streamlit Elements を使用してドラッグ可能でサイズ変更可能なダッシュボードを構築
- Day 28： streamlit-shapの実装
- Day 29： Hugging FaceとStreamlitを使用してゼロショット学習テキスト分類器を作成
- Day 30： Streamlit アプリ作成の技術
- まとめ
実践記録(Day21〜Day30)
Day 21： st.progressの実装
反復の進行に応じてグラフィカルに更新される進行状況バーを表示することが出来るst.progressの実装。
実装コード：
import streamlit as st
import time
st.title('st.progress')
with st.expander('About this app'):
st.write('You can now display the progress of your calculations in a Streamlit app with the `st.progress` command.')
my_bar = st.progress(0)
for percent_complete in range(100):
time.sleep(0.05)
my_bar.progress(percent_complete + 1)
st.balloons()
アプリケーション起動：
% streamlit run day21_st.progress.py
起動したブラウザでは以下のようにプログレスバーが表示されました。進捗は自動で進み、
進捗が100%になったタイミングで風船が飛ぶ挙動を確認できました。
Day 22： st.formの実装
要素を「送信」ボタンとともにバッチ処理するフォームを作成することが出来るst.formの実装。
実装コード：
import streamlit as st
st.title('st.form')
# Full example of using the with notation
st.header('1. Example of using `with` notation')
st.subheader('Coffee machine')
with st.form('my_form'):
st.subheader('**Order your coffee**')
# Input widgets
coffee_bean_val = st.selectbox('Coffee bean', ['Arabica', 'Robusta'])
coffee_roast_val = st.selectbox('Coffee roast', ['Light', 'Medium', 'Dark'])
brewing_val = st.selectbox('Brewing method', ['Aeropress', 'Drip', 'French press', 'Moka pot', 'Siphon'])
serving_type_val = st.selectbox('Serving format', ['Hot', 'Iced', 'Frappe'])
milk_val = st.select_slider('Milk intensity', ['None', 'Low', 'Medium', 'High'])
owncup_val = st.checkbox('Bring own cup')
# Every form must have a submit button
submitted = st.form_submit_button('Submit')
if submitted:
st.markdown(f'''
☕ You have ordered:
- Coffee bean: `{coffee_bean_val}`
- Coffee roast: `{coffee_roast_val}`
- Brewing: `{brewing_val}`
- Serving type: `{serving_type_val}`
- Milk: `{milk_val}`
- Bring own cup: `{owncup_val}`
''')
else:
st.write('☝️ Place your order!')
# Short example of using an object notation
st.header('2. Example of object notation')
form = st.form('my_form_2')
selected_val = form.slider('Select a value')
form.form_submit_button('Submit')
st.write('Selected value: ', selected_val)
アプリケーション起動：
% streamlit run day22_st.form.py
起動したブラウザでは以下のように入力フォームサンプルが表示されました。
値を指定し[Submit]を押下すると、指定した内容が連携、表示されました。
Day 23： st.experimental_get_query_paramsの実装
ユーザーのブラウザの URL から直接クエリ パラメーターを取得できるst.experimental_get_query_paramsの実装。
- st.experimental_get_query_params - Streamlit Docs
- 注：2024年04月末現在、この機能は非推奨となっているようです。(現在は
st.query_paramsを利用する形で推奨)
実装コード：
import streamlit as st
st.title('st.experimental_get_query_params')
with st.expander('About this app'):
st.write("`st.experimental_get_query_params` allows the retrieval of query parameters directly from the URL of the user's browser.")
# 1. Instructions
st.header('1. Instructions')
st.markdown('''
In the above URL bar of your internet browser, append the following:
`?firstname=Jack&surname=Beanstalk`
after the base URL `http://share.streamlit.io/dataprofessor/st.experimental_get_query_params/`
such that it becomes
`http://share.streamlit.io/dataprofessor/st.experimental_get_query_params/?firstname=Jack&surname=Beanstalk`
''')
# 2. Contents of st.experimental_get_query_params
st.header('2. Contents of st.experimental_get_query_params')
st.write(st.experimental_get_query_params())
# 3. Retrieving and displaying information from the URL
st.header('3. Retrieving and displaying information from the URL')
firstname = st.experimental_get_query_params()['firstname'][0]
surname = st.experimental_get_query_params()['surname'][0]
st.write(f'Hello **{firstname} {surname}**, how are you?')
アプリケーション起動：
% streamlit run day23_st.experimental_get_query_params.py
起動したブラウザでは以下のようにエラーが表示されていました。これはこのページ自体にパラメータが渡されていないからで、
以下のような形でURLパラメータを渡してあげるとそのパラメータを受け取って画面に表示できていることが確認できました。
Day 24： st.cacheの実装
Streamlit アプリのパフォーマンスを最適化できる機能、st.cacheの実装。こちらについても現在非推奨、st.cache_dataまたはst.cache_resourceを使うようにという案内が為されています。
実装コード：
import streamlit as st
import numpy as np
import pandas as pd
from time import time
st.title('st.cache')
# Using cache
a0 = time()
st.subheader('Using st.cache')
@st.cache(suppress_st_warning=True)
def load_data_a():
df = pd.DataFrame(
np.random.rand(2000000, 5),
columns=['a', 'b', 'c', 'd', 'e']
)
return df
st.write(load_data_a())
a1 = time()
st.info(a1-a0)
# Not using cache
b0 = time()
st.subheader('Not using st.cache')
def load_data_b():
df = pd.DataFrame(
np.random.rand(2000000, 5),
columns=['a', 'b', 'c', 'd', 'e']
)
return df
st.write(load_data_b())
b1 = time()
st.info(b1-b0)
アプリケーション起動：
% streamlit run day24_st.cache.py
起動したブラウザでは、以下のような表示が為されました。
Day 25： st.session_stateの実装
Streamlit アプリでセッション状態を実装できるst.session_stateの実装。
実装コード：
import streamlit as st
st.title('st.session_state')
def lbs_to_kg():
st.session_state.kg = st.session_state.lbs/2.2046
def kg_to_lbs():
st.session_state.lbs = st.session_state.kg*2.2046
st.header('Input')
col1, spacer, col2 = st.columns([2,1,2])
with col1:
pounds = st.number_input("Pounds:", key = "lbs", on_change = lbs_to_kg)
with col2:
kilogram = st.number_input("Kilograms:", key = "kg", on_change = kg_to_lbs)
st.header('Output')
st.write("st.session_state object:", st.session_state)
アプリケーション起動：
% streamlit run day25_st.session_state.py
起動したブラウザでは以下のような形でセッション状態を確認出来る画面が表示されました。
Day 26： Bored API アプリを構築してAPIを使用
Bored APIというAPIを用いてStreamlit アプリ内からのAPIの使用法を紹介しています。
実装コード：
import streamlit as st
import requests
st.title('🏀 Bored API app')
st.sidebar.header('Input')
selected_type = st.sidebar.selectbox('Select an activity type', ["education", "recreational", "social", "diy", "charity", "cooking", "relaxation", "music", "busywork"])
suggested_activity_url = f'http://www.boredapi.com/api/activity?type={selected_type}'
json_data = requests.get(suggested_activity_url)
suggested_activity = json_data.json()
c1, c2 = st.columns(2)
with c1:
with st.expander('About this app'):
st.write('Are you bored? The **Bored API app** provides suggestions on activities that you can do when you are bored. This app is powered by the Bored API.')
with c2:
with st.expander('JSON data'):
st.write(suggested_activity)
st.header('Suggested activity')
st.info(suggested_activity['activity'])
col1, col2, col3 = st.columns(3)
with col1:
st.metric(label='Number of Participants', value=suggested_activity['participants'], delta='')
with col2:
st.metric(label='Type of Activity', value=suggested_activity['type'].capitalize(), delta='')
with col3:
st.metric(label='Price', value=suggested_activity['price'], delta='')
アプリケーション起動：
% streamlit run day26_use_bored_api.py
起動したブラウザでは以下のような画面が表示されました。
画面左側のメニューにある選択肢を変更するとAPI呼び出しが行われ、取得した結果を表示し直すことが確認できました。
Day 27： Streamlit Elements を使用してドラッグ可能でサイズ変更可能なダッシュボードを構築
okld によって作成されたサードパーティコンポーネント：Streamlit Elementsの紹介。Streamlit ElementsはマテリアルUIウィジェット、Monaco エディター(Visual Studio Code)、Nivo チャートなどを備えた美しいアプリケーションやダッシュボードを作成するためのツールを提供します。
なお、ここのステップを実行するには別途streamlit-elementsのインストールが必要でした。
% pip install streamlit-elements==0.1
また、事前にdata.jsonというデータを用意しておく必要があります。ソースコードコメントの下記部分にある https://nivo.rocks/bump/ のサイトにアクセスし、
# Initialize default data for code editor and chart. # # For this tutorial, we will need data for a Nivo Bump chart. # You can get random data there, in tab 'data': https://nivo.rocks/bump/ # # As you will see below, this session state item will be updated when our # code editor change, and it will be read by Nivo Bump chart to draw the data.
画面右上の[data]タブをクリック。
表示されたJSONテキスト情報を丸々コピーして、実行プログラムと同列にdata.jsonというファイル名で保存しておいてください。
[
{
"id": "Serie 1",
"data": [
{
"x": 2000,
"y": 12
},
{
"x": 2001,
"y": 6
},
{
"x": 2002,
"y": 5
},
{
"x": 2003,
"y": 12
},
{
"x": 2004,
"y": 3
}
]
},
:
:
{
"x": 2004,
"y": 12
}
]
}
]
実装コード：
# First, we will need the following imports for our application.
import json
import streamlit as st
from pathlib import Path
# As for Streamlit Elements, we will need all these objects.
# All available objects and there usage are listed there: https://github.com/okld/streamlit-elements#getting-started
from streamlit_elements import elements, dashboard, mui, editor, media, lazy, sync, nivo
# Change page layout to make the dashboard take the whole page.
st.set_page_config(layout="wide")
with st.sidebar:
st.title("🗓️ #30DaysOfStreamlit")
st.header("Day 27 - Streamlit Elements")
st.write("Build a draggable and resizable dashboard with Streamlit Elements.")
st.write("---")
# Define URL for media player.
media_url = st.text_input("Media URL", value="https://www.youtube.com/watch?v=vIQQR_yq-8I")
# Initialize default data for code editor and chart.
#
# For this tutorial, we will need data for a Nivo Bump chart.
# You can get random data there, in tab 'data': https://nivo.rocks/bump/
#
# As you will see below, this session state item will be updated when our
# code editor change, and it will be read by Nivo Bump chart to draw the data.
if "data" not in st.session_state:
st.session_state.data = Path("data.json").read_text()
# Define a default dashboard layout.
# Dashboard grid has 12 columns by default.
#
# For more information on available parameters:
# https://github.com/react-grid-layout/react-grid-layout#grid-item-props
layout = [
# Editor item is positioned in coordinates x=0 and y=0, and takes 6/12 columns and has a height of 3.
dashboard.Item("editor", 0, 0, 6, 3),
# Chart item is positioned in coordinates x=6 and y=0, and takes 6/12 columns and has a height of 3.
dashboard.Item("chart", 6, 0, 6, 3),
# Media item is positioned in coordinates x=0 and y=3, and takes 6/12 columns and has a height of 4.
dashboard.Item("media", 0, 2, 12, 4),
]
# Create a frame to display elements.
with elements("demo"):
# Create a new dashboard with the layout specified above.
#
# draggableHandle is a CSS query selector to define the draggable part of each dashboard item.
# Here, elements with a 'draggable' class name will be draggable.
#
# For more information on available parameters for dashboard grid:
# https://github.com/react-grid-layout/react-grid-layout#grid-layout-props
# https://github.com/react-grid-layout/react-grid-layout#responsive-grid-layout-props
with dashboard.Grid(layout, draggableHandle=".draggable"):
# First card, the code editor.
#
# We use the 'key' parameter to identify the correct dashboard item.
#
# To make card's content automatically fill the height available, we will use CSS flexbox.
# sx is a parameter available with every Material UI widget to define CSS attributes.
#
# For more information regarding Card, flexbox and sx:
# https://mui.com/components/cards/
# https://mui.com/system/flexbox/
# https://mui.com/system/the-sx-prop/
with mui.Card(key="editor", sx={"display": "flex", "flexDirection": "column"}):
# To make this header draggable, we just need to set its classname to 'draggable',
# as defined above in dashboard.Grid's draggableHandle.
mui.CardHeader(title="Editor", className="draggable")
# We want to make card's content take all the height available by setting flex CSS value to 1.
# We also want card's content to shrink when the card is shrinked by setting minHeight to 0.
with mui.CardContent(sx={"flex": 1, "minHeight": 0}):
# Here is our Monaco code editor.
#
# First, we set the default value to st.session_state.data that we initialized above.
# Second, we define the language to use, JSON here.
#
# Then, we want to retrieve changes made to editor's content.
# By checking Monaco documentation, there is an onChange property that takes a function.
# This function is called everytime a change is made, and the updated content value is passed in
# the first parameter (cf. onChange: https://github.com/suren-atoyan/monaco-react#props)
#
# Streamlit Elements provide a special sync() function. This function creates a callback that will
# automatically forward its parameters to Streamlit's session state items.
#
# Examples
# --------
# Create a callback that forwards its first parameter to a session state item called "data":
# >>> editor.Monaco(onChange=sync("data"))
# >>> print(st.session_state.data)
#
# Create a callback that forwards its second parameter to a session state item called "ev":
# >>> editor.Monaco(onChange=sync(None, "ev"))
# >>> print(st.session_state.ev)
#
# Create a callback that forwards both of its parameters to session state:
# >>> editor.Monaco(onChange=sync("data", "ev"))
# >>> print(st.session_state.data)
# >>> print(st.session_state.ev)
#
# Now, there is an issue: onChange is called everytime a change is made, which means everytime
# you type a single character, your entire Streamlit app will rerun.
#
# To avoid this issue, you can tell Streamlit Elements to wait for another event to occur
# (like a button click) to send the updated data, by wrapping your callback with lazy().
#
# For more information on available parameters for Monaco:
# https://github.com/suren-atoyan/monaco-react
# https://microsoft.github.io/monaco-editor/api/interfaces/monaco.editor.IStandaloneEditorConstructionOptions.html
editor.Monaco(
defaultValue=st.session_state.data,
language="json",
onChange=lazy(sync("data"))
)
with mui.CardActions:
# Monaco editor has a lazy callback bound to onChange, which means that even if you change
# Monaco's content, Streamlit won't be notified directly, thus won't reload everytime.
# So we need another non-lazy event to trigger an update.
#
# The solution is to create a button that fires a callback on click.
# Our callback doesn't need to do anything in particular. You can either create an empty
# Python function, or use sync() with no argument.
#
# Now, everytime you will click that button, onClick callback will be fired, but every other
# lazy callbacks that changed in the meantime will also be called.
mui.Button("Apply changes", onClick=sync())
# Second card, the Nivo Bump chart.
# We will use the same flexbox configuration as the first card to auto adjust the content height.
with mui.Card(key="chart", sx={"display": "flex", "flexDirection": "column"}):
# To make this header draggable, we just need to set its classname to 'draggable',
# as defined above in dashboard.Grid's draggableHandle.
mui.CardHeader(title="Chart", className="draggable")
# Like above, we want to make our content grow and shrink as the user resizes the card,
# by setting flex to 1 and minHeight to 0.
with mui.CardContent(sx={"flex": 1, "minHeight": 0}):
# This is where we will draw our Bump chart.
#
# For this exercise, we can just adapt Nivo's example and make it work with Streamlit Elements.
# Nivo's example is available in the 'code' tab there: https://nivo.rocks/bump/
#
# Data takes a dictionary as parameter, so we need to convert our JSON data from a string to
# a Python dictionary first, with `json.loads()`.
#
# For more information regarding other available Nivo charts:
# https://nivo.rocks/
nivo.Bump(
data=json.loads(st.session_state.data),
colors={ "scheme": "spectral" },
lineWidth=3,
activeLineWidth=6,
inactiveLineWidth=3,
inactiveOpacity=0.15,
pointSize=10,
activePointSize=16,
inactivePointSize=0,
pointColor={ "theme": "background" },
pointBorderWidth=3,
activePointBorderWidth=3,
pointBorderColor={ "from": "serie.color" },
axisTop={
"tickSize": 5,
"tickPadding": 5,
"tickRotation": 0,
"legend": "",
"legendPosition": "middle",
"legendOffset": -36
},
axisBottom={
"tickSize": 5,
"tickPadding": 5,
"tickRotation": 0,
"legend": "",
"legendPosition": "middle",
"legendOffset": 32
},
axisLeft={
"tickSize": 5,
"tickPadding": 5,
"tickRotation": 0,
"legend": "ranking",
"legendPosition": "middle",
"legendOffset": -40
},
margin={ "top": 40, "right": 100, "bottom": 40, "left": 60 },
axisRight=None,
)
# Third element of the dashboard, the Media player.
with mui.Card(key="media", sx={"display": "flex", "flexDirection": "column"}):
mui.CardHeader(title="Media Player", className="draggable")
with mui.CardContent(sx={"flex": 1, "minHeight": 0}):
# This element is powered by ReactPlayer, it supports many more players other
# than YouTube. You can check it out there: https://github.com/cookpete/react-player#props
media.Player(url=media_url, width="100%", height="100%", controls=True)%
アプリケーション起動：
% streamlit run day27_streamlet-elements.py
起動したブラウザでは以下のような形で操作可能なウィジェットで構成される画面が表示されました。
要素のそれぞれはサイズ変更、位置の移動が可能となっています。既存配置を以下のような形に加工編集することができました。
Day 28： streamlit-shapの実装
StreamlitでSHAPプロットを表示するためのラッパーを提供するStreamlit コンポーネント、streamlit-shapの実装。
そもそもSHAPプロットって何？ってのがありますが、これは機械学習モデルを解釈するのに便利な手法とのことです。
SHAP(SHapley Additive exPlanations)は、機械学習モデルを解釈するのに便利な手法です。モデルの予測に対し、特徴量（説明変数）の寄与度を定量的に算出できます。また、モデルのアルゴリズムの種類(決定木・線形回帰など)に限定されません。様々な場面で使用できる点からも人気の高い手法です。
利用にはstreamlitの他にstreamlit-shapが必要となります。前者は既に導入済みですので、ここでは追加でstreamlit-shap、及びをインストールしました。
% pip install streamlit-shap % pip install xgboost
実装コード：
import streamlit as st
from streamlit_shap import st_shap
import shap
from sklearn.model_selection import train_test_split
import xgboost
import numpy as np
import pandas as pd
st.set_page_config(layout="wide")
@st.experimental_memo
def load_data():
return shap.datasets.adult()
@st.experimental_memo
def load_model(X, y):
X_train, X_test, y_train, y_test = train_test_split(X, y, test_size=0.2, random_state=7)
d_train = xgboost.DMatrix(X_train, label=y_train)
d_test = xgboost.DMatrix(X_test, label=y_test)
params = {
"eta": 0.01,
"objective": "binary:logistic",
"subsample": 0.5,
"base_score": np.mean(y_train),
"eval_metric": "logloss",
"n_jobs": -1,
}
model = xgboost.train(params, d_train, 10, evals = [(d_test, "test")], verbose_eval=100, early_stopping_rounds=20)
return model
st.title("`streamlit-shap` for displaying SHAP plots in a Streamlit app")
with st.expander('About the app'):
st.markdown('''[`streamlit-shap`](https://github.com/snehankekre/streamlit-shap) is a Streamlit component that provides a wrapper to display [SHAP](https://github.com/slundberg/shap) plots in [Streamlit](https://streamlit.io/).
The library is developed by our in-house staff [Snehan Kekre](https://github.com/snehankekre) who also maintains the [Streamlit Documentation](https://docs.streamlit.io/) website.
''')
st.header('Input data')
X,y = load_data()
X_display,y_display = shap.datasets.adult(display=True)
with st.expander('About the data'):
st.write('Adult census data is used as the example dataset.')
with st.expander('X'):
st.dataframe(X)
with st.expander('y'):
st.dataframe(y)
st.header('SHAP output')
# train XGBoost model
model = load_model(X, y)
# compute SHAP values
explainer = shap.Explainer(model, X)
shap_values = explainer(X)
with st.expander('Waterfall plot'):
st_shap(shap.plots.waterfall(shap_values[0]), height=300)
with st.expander('Beeswarm plot'):
st_shap(shap.plots.beeswarm(shap_values), height=300)
explainer = shap.TreeExplainer(model)
shap_values = explainer.shap_values(X)
with st.expander('Force plot'):
st.subheader('First data instance')
st_shap(shap.force_plot(explainer.expected_value, shap_values[0,:], X_display.iloc[0,:]), height=200, width=1000)
st.subheader('First thousand data instance')
st_shap(shap.force_plot(explainer.expected_value, shap_values[:1000,:], X_display.iloc[:1000,:]), height=400, width=1000)
アプリケーション起動：
% streamlit run day28_streamlit-shap.py
起動したブラウザでは以下のような表示が為されることを確認できました。
Day 29： Hugging FaceとStreamlitを使用してゼロショット学習テキスト分類器を作成
この日の内容は、別ブログに展開されている機械学習系のハンズオンを実践する、というものでした。
Day 30： Streamlit アプリ作成の技術
最後30日目の実践内容は『現実世界の問題をStreamlitで解決しよう』ということで、YouTube 動画からサムネイル画像を抽出できるStreamlitアプリを作る、というものになっています。以下の処理を実装しています。
- ユーザーからの入力としてYouTube URLを受け入れる
- URLのテキスト処理を実行して、一意のYouTube動画IDを抽出
- YouTubeビデオIDを、YouTubeビデオからサムネイル画像を取得して表示するカスタム関数への入力として使用
実装コード：
import streamlit as st
st.title('🖼️ yt-img-app')
st.header('YouTube Thumbnail Image Extractor App')
with st.expander('About this app'):
st.write('This app retrieves the thumbnail image from a YouTube video.')
# Image settings
st.sidebar.header('Settings')
img_dict = {'Max': 'maxresdefault', 'High': 'hqdefault', 'Medium': 'mqdefault', 'Standard': 'sddefault'}
selected_img_quality = st.sidebar.selectbox('Select image quality', ['Max', 'High', 'Medium', 'Standard'])
img_quality = img_dict[selected_img_quality]
yt_url = st.text_input('Paste YouTube URL', 'https://youtu.be/JwSS70SZdyM')
def get_ytid(input_url):
if 'youtu.be' in input_url:
ytid = input_url.split('/')[-1]
if 'youtube.com' in input_url:
ytid = input_url.split('=')[-1]
return ytid
# Display YouTube thumbnail image
if yt_url != '':
ytid = get_ytid(yt_url) # yt or yt_url
yt_img = f'http://img.youtube.com/vi/{ytid}/{img_quality}.jpg'
st.image(yt_img)
st.write('YouTube video thumbnail image URL: ', yt_img)
else:
st.write('☝️ Enter URL to continue ...')
アプリケーション起動：
% streamlit run day30_yt-img-app.py
起動したブラウザでは以下のような画面が表示されました。
URLの部分を入れ替えてみると、対応したYouTube動画に関するサムネイルが作成されたことを確認できました。
まとめ
という訳でStreamlitハンズオン『30 Days of Streamlit』を3日でやってみた、の3日目の実践内容の紹介でした。
都合3日間(約10時間)で全30日分のハンズオンを実際に試してみた形となりましたが、非常に短いコード、簡潔な記述でここまでバリエーションに富んだWebアプリケーションを構築出来るというのは実に便利なフレームワークだなぁ、というのが全体を通してのStreamlitに対する印象でした。ローカル環境で試せるのは勿論のこと、クラウド環境への展開方法も準備されているので実用展開の幅も色々夢が広がりそうです。Streamlitに興味を持ち始めたという方がいらっしゃいましたら是非このハンズオンを試してみてください。
